{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">
	<link rel="stylesheet" href="{{ javascript_path }}libs/formvalidator/developr.validationEngine.css">
{% endblock %}
{% block content_title %}{{user.username}}{% endblock %}
{% block content %}
<form action="{{ cms_url('users/edit') }}/{{ user.id }}" method="post" class="validateform">
<input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />
		<div class="with-padding">
			<div class="columns">
                <div class="six-columns twelve-columns-tablet">
    
                        <h3 class="thin underline">Credentials</h3>
    					
                        <fieldset class="fieldset fields-list">
                        	
    
                            <legend class="legend">Authentication</legend>
    
                            <div class="field-block button-height">
                                <small class="input-info">This is the name that will be displayed on profile page</small>
                                <label for="username" class="label"><b>Username</b></label>
                                <input type="text" name="username" id="username" value="{{ user.username }}" class="input validate[required,custom[onlyLetterSp],min[3],max[10]">
                            </div>
                            
                            <div class="field-block button-height">
                                <small class="input-info">Leave empty if you do not want to change the password</small>
                                <label for="password" class="label"><b>Password</b></label>
                                <input type="password" name="password" id="password" value="" class="input validate[min[6],max[20]]">
                            </div>
                            
                            <div class="field-block button-height">
                                <label for="email" class="label"><b>Email</b></label>
                                <input type="text" name="email" id="email" value="{{ user.email }}" class="input validate[required,custom[email]]">
                            </div>
                            
                            <div class="field-block button-height">
                                <label for="enabled" class="label"><b>Enabled</b></label>
                                <input type="checkbox" name="enabled" id="enabled" class="switch big wider mid-margin-right" value="1" checked data-text-on="ENABLED" data-text-off="DISABLED">
                            </div>
                            
                            <div class="field-block button-height">
                                <label for="login" class="label"><b>Group</b></label>
                                <select name="group" class="select multiple anthracite-gradient">
                                	{% for cgroup in groups %}
                                    	{% if cgroup.id == group.id %}                                   
                                    		<option value="{{ cgroup.id }}" selected="selected">{{ cgroup.name }}</option>	
                                        {% else %}
                                       		<option value="{{ cgroup.id }}">{{ cgroup.name }}</option>	
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            
                            
    
                    
                        </fieldset>
    
                    </div>
                    
                    
                    <div class="six-columns twelve-columns-tablet">
    
                        <h3 class="thin underline">Additional data</h3>
    
                        <fieldset class="fieldset fields-list">
    
                            <legend class="legend">Personal</legend>
    
                            <div class="field-block button-height">
                                <label for="first_name" class="label"><b>First name</b></label>
                                <input type="text" name="first_name" id="first_name" value="{{ user.first_name }}" class="input">
                            </div>
                            
                            <div class="field-block button-height">
                                <label for="last_name" class="label"><b>Last name</b></label>
                                <input type="text" name="last_name" id="last_name" value="{{ user.last_name }}" class="input">
                            </div>
    
                
    
                        </fieldset>
    
                     </div>
                    <div class="twelve-columns twelve-columns-tablet">

                        
    
                            <div class="field-block button-height">
    
                                <button type="submit" class="button glossy mid-margin-right">
                                    <span class="button-icon"><span class="icon-tick"></span></span>
                                    Save
                                </button>
    
                                <button type="submit" class="button glossy">
                                    <span class="button-icon red-gradient"><span class="icon-cross-round"></span></span>
                                    Cancel
                                </button>
    
                            </div>
    
    
                	 </div>
                 
           
			</div>
		</div>
 </form>
{% endblock %}
{% block javascripts %}


	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/jquery.validationEngine.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/languages/jquery.validationEngine-en.js"></script>
    
    <script>
	$(document).ready(function(){
		$(".validateform").validationEngine();
	   });
	</script>
	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();

		// Tooltip menu
		$(document).ready(function()
		{
			$('#select-tooltip').menuTooltip($('#select-context').hide(), {
				classes: ['no-padding']
			});
		});

	</script>
{% endblock %}

</body>
</html>